<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <title>角色添加</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap/bootstrap.min.css"/>

    <script src="/js/base/require.min.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                "require-config":"/js/base/require.config"
            }
        });

        require(["require-config"],function (){
            require(["validationEngine"],function () {
                $(function () {
                    $("#saveBtn").click(function () {
                        var valid = $("#saveform").validationEngine("validate");
                        if (!valid) {
                            return;
                        }
                        window.document.forms[0].submit();
                    });

                    $.validationEngine.ajaxConfig = {
                        "roleNameValidate":{
                            "url" : "/back/role/validateRoleName.do",
                            "alertTextOk" : "* 此角色名称可以使用",
                            "alertText" : "* 此角色名称已被其他人使用",
                            "alertTextLoad" : "* 正在确认角色名称是否可用"
                        }
                    };

                    var validateOption = {
                        scroll: false,
                        ajaxFormValidation: true,
                        //binded:false,
                        //showArrow:false,
                        //promptPosition:"centerRight",
                        autoHidePrompt: false,
                        maxErrorsPerField: 1,
                        showOneMessage: true,
                        ajaxReturnIsSuccess:function (result) {
                            if (!result) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    };
                    $("#saveform").validationEngine(validateOption);

                    $("#backBtn").click(function () {
                        window.location.href="${controllerUrlPrefix}/list.do";
                    });
                });
            });
        });

    </script>
</head>
<body>

    <form method="post" id="saveform" class="form-horizontal" action="<%=request.getContextPath()%>/back/role/addRole.do">

        <div class="form-group">
            <label for="mobilphone" class="col-sm-2 control-label">角色名称</label>
            <div class="col-sm-5">
                <input type="text" id="name" name="name" maxlength="20" size="40" class="validate[required, maxSize[20], ajax[roleNameValidate]] form-control "/>
            </div>
            <font color="red">*</font>

        </div>

        <%--<div class="form-group">--%>
            <%--<label for="username" class="col-sm-2 control-label">角色ID</label>--%>
            <%--<div class="col-sm-5">--%>
                <%--<input type="text" id="code" name="code" maxlength="20" size="40" class="validate[required, custom[onlyLetterNumber]]] form-control "/>--%>
            <%--</div>--%>
            <%--<font color="red">*</font>--%>

        <%--</div>--%>


        <div class="form-group">
            <label for="mobilphone" class="col-sm-2 control-label">描述</label>
            <div class="col-sm-5">
                <textarea rows="10" cols="50" name="description" class=" form-control validate[required, maxSize[100]]" id="description" ></textarea>

            </div>
            <font color="red">*</font>
        </div>


        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" id="saveBtn" class="btn btn-primary">保存</button>
                <button type="button" id="backBtn" class="btn">返回</button>
            </div>

        </div>
    </form>

</body>
</html>
